<template>
  <div class="user_right fl ml20">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="invoice">
      <div class="customs_body">
        <div>
          <span>公司名称</span>
          <div>
            <el-input class="ipt255" v-model="company" :disabled="true"></el-input>
            <p>温馨提示:公司名称无法更改,如需更改请联系客服人员.</p>
          </div>
        </div>
        <div>
          <span>税号</span>
          <el-form-item class="male0" prop="ein">
            <el-input class="ipt255" v-model="ruleForm.ein" placeholder="请输入税号"></el-input>
          </el-form-item>
        </div>
        <div>
          <span>公司地址</span>
          <el-form-item class="male0" prop="address">
            <el-input
              class="ipt255"
              type="textarea"
              :rows="5"
              placeholder="请输入详细地址"
              v-model="ruleForm.address"
            ></el-input>
          </el-form-item>
        </div>
        <div>
          <span>联系电话</span>
          <el-form-item class="male0" prop="phone">
            <el-input class="ipt255" v-model="ruleForm.phone" placeholder="请输入电话"></el-input>
          </el-form-item>
        </div>
        <div>
          <span>开户银行</span>
          <el-form-item class="male0" prop="bank_name">
            <el-input class="ipt255" v-model="ruleForm.bank_name" placeholder="请输入开户银行"></el-input>
          </el-form-item>
        </div>
        <div>
          <span>银行账号</span>
          <el-form-item class="male0" prop="bank_account">
            <el-input class="ipt255" v-model="ruleForm.bank_account" placeholder="请输入银行账号"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="customs_mail">
        <p class="p_top">邮寄信息</p>
        <div class="customs_mail_body">
          <div>
            <span>收票人姓名</span>
            <el-form-item class="male0" prop="manama_name">
              <el-input class="ipt255" v-model="ruleForm.manama_name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </div>
          <div>
            <span>收票人电话</span>
            <el-form-item class="male0" prop="manama_phone">
              <el-input class="ipt255" v-model="ruleForm.manama_phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </div>
          <div>
            <span>收票人地址</span>
            <el-form-item class="male0" prop="provinces">
              <el-select class="select130" v-model="ruleForm.provinces" placeholder="请选择省份">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="male0" prop="city">
              <el-select class="select130" v-model="ruleForm.city" placeholder="请选择城市">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <span>收票人详细地址</span>
            <el-form-item class="male0" prop="street">
              <el-input
                class="ipt255"
                type="textarea"
                :rows="5"
                placeholder="请输入详细地址"
                v-model="ruleForm.street"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <div onselectstart="return false;" class="btn_save" @click="submitForm('ruleForm')">保存</div>
    </el-form>
  </div>
</template>


<script>
export default {
  data() {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的手机号"));
    };
    return {
      company: "武昌军政府办公厅",
      ruleForm: {
        ein: "",
        address: "",
        phone: "",
        bank_name: "",
        bank_account: "",
        manama_name: "",
        manama_phone: "",
        provinces: "",
        city: "",
        street: ""
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      rules: {
        ein: [{ required: true, message: "请填写税号", trigger: "blur" }],
        address: [
          { required: true, message: "请填写公司地址", trigger: "blur" }
        ],
        phone: [{ required: true, trigger: "blur" }],
        bank_name: [
          { required: true, message: "请填开户银行", trigger: "blur" }
        ],
        bank_account: [
          { required: true, message: "请填银行账号", trigger: "blur" }
        ],
        manama_name: [
          { required: true, message: "请填收票人姓名", trigger: "blur" }
        ],
        manama_phone: [
          { required: true, validator: checkMobile, trigger: "blur" }
        ],
        provinces: [{ required: true, message: "请选择省份", trigger: "blur" }],
        city: [{ required: true, message: "请选择城市", trigger: "blur" }],
        street: [{ required: true, message: "请填收票人地址", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>


<style lang="scss" >
.customs_body {
  margin-top: 54px;
  > div {
    display: flex;
    margin-bottom: 15px;
    font-size: 16px;
    > span {
      width: 255px;
      text-align: right;
      margin-right: 40px;
      &::after {
        content: ":";
        font-size: 16px;
        font-weight: 600;
        margin-left: 3px;
      }
      &::before {
        content: "*";
        color: red;
        margin-right: 3px;
      }
    }
    &:nth-child(1) {
      > div {
        > p {
          margin-top: 7px;
          color: #ff0000;
          font-size: 12px;
        }
      }
    }
  }
}
.ipt255 {
  width: 275px;
  .el-input__inner {
    height: 32px;
  }
}
.customs_mail_body {
  font-size: 16px;
  > div {
    display: flex;
    margin-bottom: 15px;
    > span {
      float: left;
      width: 255px;
      text-align: right;
      margin-right: 40px;
      &::after {
        content: ":";
        font-size: 16px;
        margin-left: 3px;
        font-weight: 600;
      }
      &::before {
        content: "*";
        color: red;
        margin-right: 3px;
      }
    }
  }
}
.select130 {
  width: 130px;
  margin-right: 15px;
}
.p_top {
  font-size: 20px;
  color: #4448f8;
  padding-left: 68px;
  font-weight: 600;
  margin-bottom: 48px;
  margin-top: 58px;
}
.btn_save {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 115px;
  background: #4448f8;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition:  all 0.2s ease-in-out;
  &:hover{
    background: #777acc9d;
  }
}
.user_right {
  padding-bottom: 50px;
}
.male0 {
  margin-left: 0 !important;
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>